<template>
  <l-content width="1400px" no-padding no-breadcrumb>
    <el-card>
      <el-form :inline="true" size="mini"
               :model="searchForm" label-width="70px"
               onkeydown="if(event.keyCode===13){return false;}" @keyup.native.enter="onSearch">
        <div>
          <el-form-item label="政策类型">
            <el-select v-model="searchForm.policyType" class="w120" clearable>
              <el-option value="B2B" label="B2B"/>
              <el-option value="BSP" label="BSP"/>
            </el-select>
          </el-form-item>
          <el-form-item label="航司">
            <el-select v-model="searchForm.airline" class="w120" clearable filterable>
              <el-option v-for="item in options.airLine" :label="item.value" :value="item.key" :key="item.key"/>
            </el-select>
          </el-form-item>
          <el-form-item label="舱位">
            <el-input class="w120" v-model="searchForm.clazz"/>
          </el-form-item>
          <el-form-item label="乘机日期">
            <el-date-picker
              value-format="yyyy-MM-dd"
              class="w120"
              v-model="searchForm.flightDateStart"
              type="date"
              placeholder="起始日期"/>
          </el-form-item>
          <el-form-item label="乘机止">
            <el-date-picker
              value-format="yyyy-MM-dd"
              class="w120"
              v-model="searchForm.flightDateEnd"
              type="date"
              placeholder="结束日期"/>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" type="primary" @click="onSearch">查询</el-button>
            <!--<el-button type="primary">导出</el-button>-->
          </el-form-item>
        </div>
        <div>
          <el-form-item label="出发城市">
            <el-input class="w120" v-model="searchForm.dCity"/>
          </el-form-item>
          <el-form-item label="到达城市">
            <el-input class="w120" v-model="searchForm.aCity"/>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" class="w120" clearable>
              <el-option value="1" label="启用"/>
              <el-option value="0" label="停用"/>
            </el-select>
          </el-form-item>
          <el-form-item label="有效期">
            <el-date-picker
              value-format="yyyy-MM-dd"
              class="w120"
              v-model="searchForm.effectDateStart"
              type="date"
              placeholder="起始日期"/>
          </el-form-item>
          <el-form-item label="有效期止">
            <el-date-picker
              value-format="yyyy-MM-dd"
              class="w120"
              v-model="searchForm.effectDateEnd"
              type="date"
              placeholder="结束日期"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onAdd">新增</el-button>
            <!--<el-button type="primary">导入</el-button>-->
          </el-form-item>
        </div>
        <div>
          <el-form-item>
            <c-pop-button pMsg="确认要批量删除吗？" type="danger" @click="onBatchDelete">批量删除</c-pop-button>
          </el-form-item>
        </div>
      </el-form>
      <c-page-table
        stripe
        :data="tableData"
        @selection-change="selectRows = $event"
        @select-page="onSelectPage"
        @sort-change="onSortChange"
        :loading="loading">
        <el-table-column
          label="序号"
          type="index"
          width="40">
        </el-table-column>
        <el-table-column
          type="selection"
          width="40">
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          min-width="50">
        </el-table-column>
        <el-table-column
          prop="policyType"
          label="政策类型"
          min-width="50">
        </el-table-column>
        <el-table-column
          prop="statusStr"
          label="状态"
          min-width="40">
        </el-table-column>
        <el-table-column
          prop="airline"
          label="航司"
          min-width="50">
        </el-table-column>
        <el-table-column
          prop="dCity"
          label="出发城市"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="aCity"
          label="到达城市"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="flightNo"
          label="航班号"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="clazz"
          label="舱位"
          min-width="50">
        </el-table-column>
        <el-table-column
        label="乘机起止日期"
        width="110">
        <template slot-scope="scope">
          {{scope.row.departDateStart | dateShortFormat}}至{{scope.row.departDateEnd | dateShortFormat}}
        </template>
      </el-table-column>

        <el-table-column
          label="有效期起止日期"
          width="110">
          <template slot-scope="scope">
            <template v-if="scope.row.effectTimeStart">
              {{scope.row.effectTimeStart | dateShortFormat}}
            </template>
            <template v-else>-</template>
            至
            <template v-if="scope.row.effectTimeEnd">
              {{scope.row.effectTimeEnd | dateShortFormat}}
            </template>
            <template v-else>-</template>
          </template>
        </el-table-column>
        <el-table-column
          prop="rebates"
          label="返点"
          min-width="50">
          <template slot-scope="scope">
            {{scope.row.rebates | percent}}
          </template>
        </el-table-column>
        <el-table-column
          prop="fixedFee"
          label="定额费"
          min-width="50">
        </el-table-column>
        <el-table-column
          prop="shopName"
          label="操作"
          min-width="80">
          <template slot-scope="scope">
            <a href="javascript: void(0)" @click="onEdit(scope.row)">编辑</a>
          </template>
        </el-table-column>
      </c-page-table>
    </el-card>

    <component :is="dialog.tag" :data="dialog.data" @ok="resetPage"
               @close="dialog.tag = ''"/>
  </l-content>
</template>

<script>
import SDialogAdd from './comps/PolicyManagePage/SDialogAdd'
import SDialogEdit from './comps/PolicyManagePage/SDialogEdit'
import SDialogDetail from './comps/PolicyManagePage/SDialogDetail'

export default {
  name: 'PolicyManagePage',
  props: {
    app: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  components: {
    SDialogAdd,
    SDialogEdit,
    SDialogDetail
  },
  filters: {
  },
  data () {
    const searchForm = {
      policyType: null,
      airline: null,
      clazz: null,
      flightDateStart: null,
      flightDateEnd: null,
      dCity: null,
      aCity: null,
      status: null, // 0-停用，1-启用
      effectDateStart: null,
      effectDateEnd: null
    }
    const query = Object.assign({
      page: 1,
      pageSize: 50
    }, searchForm)
    return {
      loading: false,
      searchForm: searchForm,
      query: query,
      options: {
        airLine: []
      },
      selectRows: [],
      tableData: {
        /* 表格数据固定写法 */
        records: 0,
        page: 1,
        rows: []
      },
      dialog: {
        tag: '',
        data: {
          id: null
        }
      }
    }
  },
  created () {
    this.onSearch()
    this.loadOptions()
  },
  methods: {
    onSearch () {
      // 把searchForm里面的值覆盖到paramForm里面去
      Object.assign(this.query, this.searchForm)
      this.query.page = 1
      this.refreshPage()
    },
    onSelectPage (page, size) {
      this.query.page = page
      this.query.pageSize = size
      this.refreshPage()
    },
    onSortChange ({sidx, sord}) {
      // 排序设置
      this.query.sidx = sidx
      this.query.sord = sord
      this.refreshPage()
    },
    resetPage () {
      this.query.page = 1
      this.refreshPage()
    },
    refreshPage (loading = true) {
      this.loading = loading
      this.$service.policy.queryPolicyPage(this.query).then(res => {
        this.tableData = res.data
      }).finally(() => {
        this.loading = false
      })
    },
    onBatchDelete (btn) {
      const ids = this.selectRows.map(i => i.id)
      this.$service.policy.batchDelete({ids}).then(() => {
        this.refreshPage()
      }).finally(() => {
        btn.isLoading(false)
      })
    },
    onAdd () {
      this.dialog.tag = 'SDialogAdd'
    },
    onEdit (row) {
      this.dialog.data.id = row.id
      this.dialog.tag = 'SDialogEdit'
    },
    onDetail (row) {
      this.dialog.data.id = row.id
      this.dialog.tag = 'SDialogDetail'
    },
    loadOptions () {
      this.$service.options.getAirLineOption().then(res => {
        this.options.airLine = res.data
      })
    }
  }
}
</script>

<style></style>
